<template>
	<view>
		<!-- 如果只是简单的 手机上 文本长按复制 请使用如下样式,text标签添加selectable属性 -->
		<view style="text-align: center;margin-top: 100upx;">
			<text selectable="selectable">手机 长按文本复制</text>
		</view>
		
		<button type="default" style="color: #fff;background: #4CD964;margin-top: 100upx;" @click="setClipboardData"> 除h5端的复制 </button>
		
		<button type="default" style="color: #fff;background: #4CD964;margin-top: 100upx;" @click.stop.prevent="copy"> h5端的复制 </button>
		
	</view>
</template>

<script>
	export default {
		methods:{
			setClipboardData(){
				uni.setClipboardData({
				    data: '邱泽贤喜欢的人是...', // 复制内容, 非h5生效,如手机
				    success: function () {
							uni.showToast({
								title:'复制成功',
								icon:'none'
							})
				    }
				});
			},
			copy(text) {
				let content = '邱泽贤喜欢的人是...' // 复制内容，必须字符串，数字需要转换为字符串
				const result = this.h5Copy(content)
				if (result === false) {
					uni.showToast({
						title:'不支持',
					})
				} else {
				 uni.showToast({
						title:'复制成功',
						icon:'none'
				 })
				}
			},
			h5Copy(content) {
				if (!document.queryCommandSupported('copy')) {
				  // 不支持
				  return false
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				textarea.remove()
				return result
			},
		}
	}
</script>

<style>
</style>
